<template>
	<view class="contact">
		<!-- <image class="img" src="http://www.itcast.cn/2018czydz/images/gywmban.jpg"></image>
		<view class="info">
			<view @click="phone">联系电话：400-618-9090 ( 点击拨打 )</view>
			<view>校区地址：浙江省杭州市下沙经济开发区4号大街187号盛泰时代山</view>
		</view> -->
		<map class="map" style="width: 100%; height: 300px;" :longitude="longitude" :scale="scale" :latitude="latitude" :markers="markers"></map>
		<view class="diaoyong">
			<button @click="toMapAPP(41.767799,123.405081,'福润隆超市')" type="primary" size="mini">调用导航</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: 123.405081,
				latitude: 41.767799,
				scale: 13,
				markers:[
					{
						longitude: 123.405081,
						latitude: 41.767799,
						// iconPath: '../../static/hmlogo.png',
						width: 30,
						height: 30,
						label:{
							content:'福润隆超市',
						}
					}
				]
			}
		},
		methods: {
			/* phone() {
				uni.makePhoneCall({
					phoneNumber: '400-618-9090'
				})
			} */
			
			toMapAPP(latitude,longitude,name){
				let url = "";
				if (plus.os.name == "Android") {//判断是安卓端
					plus.nativeUI.actionSheet({//选择菜单
						title: "选择地图应用",
						cancel: "取消",
						// buttons: [{title: "高德地图"},{title: "百度地图"}, {title: "腾讯地图"}]
						buttons: [{title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						// buttons: [{title: "高德地图"},{title: "百度地图"}, {title: "腾讯地图"}]
						buttons: [ {title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
.contact{
	.img{
		width: 750rpx;
		height: 320rpx;
	}
	.info{
		padding: 10rpx 20rpx;
		font-size: 30rpx;
		view{
			line-height: 80rpx;
			border-bottom: 1px solid #eee;
		}
	}
	
	.map{
		width: 750rpx;
		height: 750rpx;
	}
	.diaoyong{
		margin: 20rpx 0;
		text-align: center;
	}
}
</style>
